import { messages } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Tabs, Button, message, Dropdown, Icon, Menu, Table, Alert, Badge } from 'antd'
const TabPane = Tabs.TabPane;
import baseService from 'share/base.service'
import SlideFrame from 'components/slide-frame'
import NewReimbursementStandard from 'containers/expense-reimbursement-control/expense-standard/reimbursement-standard/new-reimbursement-standard'
import menuRoute from 'routes/menuRoute'

class ExpenseStandard extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      setOfBooks: [],
      loading: false,
      nowSetOfBooks: {
        id: '',
        setOfBooksName: ''
      },
      columns: [
        {title: '序号', dataIndex: 'index'},
        {title: '规则集编码', dataIndex: 'code'},
        {title: '规则集名称', dataIndex: 'name'},
        {title: '分配公司', dataIndex: 'company'},
        {title: '规则集状态', dataIndex: 'enabled',
          render: enabled => <Badge status={enabled ? 'success' : 'error'} text={enabled ? '启用' : '禁用'} />
        },
        {title: '操作', dataIndex: 'operate', render: (text, record) => (
          <span>
            <a onClick={() => this.setState({ showSlideFrame: true, nowData: record})}>编辑</a>
            <span className="ant-divider" />
            <a onClick={() => this.goDetail(record)}>详情</a>
            <span className="ant-divider" />
            <a onClick={() => this.handleDistribute(record)}>分配公司</a>
            </span>)
        }
      ],
      showSlideFrame: false,
      data: [{
        id: 1, index: 1, code: 'DEFAULT_RULE', name: '默认规则', company: '中国公司', enabled: true
      }],
      nowData: {}
    }
  }

  componentDidMount(){
    let setOfBooksId = this.props.company.setOfBooksId;
    if (this.props.tenantMode) {
      baseService.getSetOfBooksByTenant().then(resp => {
        if (resp.status === 200 && resp.data) {
          let nowSetOfBooks = {};
          resp.data.map(item => {
            if(item.id === setOfBooksId)
              nowSetOfBooks = item;
          });
          this.setState({ setOfBooks: resp.data, nowSetOfBooks });
        }
      }).catch(error => {
        message.error(messages('common.error'));
      });
    }else {
      let nowSetOfBooks = {
        id: setOfBooksId,
        setOfBooksName: this.props.company.setOfBooksName
      };
      this.setState({ setOfBooks: [nowSetOfBooks], nowSetOfBooks})
    }
  }

  goDetail = record => {
    this.context.router.push(menuRoute.getRouteItem('reimbursement-standard-rules-group').url.replace(':groupId', record.id))
  };

  handleDistribute = record => {

  };

  handleChangeSetOfBooks = (e) => {
    const { setOfBooks } = this.state;
    let nowSetOfBooks = {};
    setOfBooks.map(item => {
      if(item.id === e.key)
        nowSetOfBooks = item;
    });
    this.setState({ nowSetOfBooks }, this.getSubsidyList)
  };

  handleClose = () => {
    this.setState({ showSlideFrame: false })
  };

  render() {
    const { setOfBooks, nowSetOfBooks, loading, columns, showSlideFrame, data, nowData } = this.state;
    const menuSetOfBooks = (
      <Menu onClick={this.handleChangeSetOfBooks}>
        {setOfBooks.map(item => <Menu.Item key={item.id}>{item.setOfBooksName}</Menu.Item>)}
      </Menu>
    );
    return (
      <div>
        {this.props.tenantMode && (
          <div style={{marginBottom: 20}}>
            <span>{messages('setting.key503'/*帐套*/)}：</span>
            <Dropdown overlay={menuSetOfBooks}>
              <span className='default-color-font'>{nowSetOfBooks.setOfBooksName} <Icon type="down"/></span>
            </Dropdown>
          </div>
        )}
        <div style={{ margin: '10px 0' }}>
          <Button type="primary" onClick={() => this.setState({ showSlideFrame: true, nowData: {}})}>
            <Icon type="plus" />&nbsp;新建规则集
          </Button>
        </div>
        <Alert message={
          <span>
                1、新增加且生效的公司会默认分配规则（编码：DEFAULT_RULE）<br/>
                2、每家公司至多有1条规则集
              </span>} type="info" showIcon />
        <Table columns={columns}
               style={{ marginTop: 10 }}
               dataSource={data}
               rowKey="id"/>
        <SlideFrame content={NewReimbursementStandard}
                    show={showSlideFrame}
                    onClose={() => this.setState({ showSlideFrame: false })}
                    params={{nowData}}
                    afterClose={this.handleClose}
                    title="规则集"/>
      </div>
    )
  }
}

ExpenseStandard.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(ExpenseStandard)
